<template>
	<scroll-view scroll-y class="album_scroll_view" @scrolltolower="handleToLower">
		<!-- swiper 默认高度150px，,图片默认宽度320px,高度240px 
				 所以要计算图片宽高比例，匹配到swiper样式中-->
		<!-- swiper -->
		<view class="album_swiper">
			<swiper :indicator-dots="true" :autoplay="true" circular :interval="3000" :duration="1000">
				<swiper-item v-for="item in banner" :key="item.id">
					<image :src="item.thumb" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 列表 -->
		<view class="album_list">
			<navigator class="album_item" 
			 v-for="item in album" :key='item.id'
			 :url="`/pages/album/album?id=${item.id}`"
			 >
			<view class="album_img">
				<image mode="aspectFill" :src="item.cover" ></image>
			</view>
			<view class="album_info">
				<view class="album_name">{{item.name}}</view>
				<view class="album_desc">{{item.desc}}</view>
				<view class="album_btn">
					<view class="album_attention">关注</view>
				</view>
			</view>
			</navigator>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					limit: 30,
					order: 'new',
					skip: 0
				},
				//轮播图
				banner: [],
				//列表
				album: [],
				// 是否还有分页数据
				hasMore: true
			}
		},
		mounted() {
			uni.setNavigationBarTitle({title: '专辑'})
			this.getList()
		},
		methods: {
		async	getList() {
		const result =	await	this.request({
					url:'http://157.122.54.189:9088/image/v1/wallpaper/album',
					data: this.params
				})
				if(this.banner.length === 0) {
					this.banner = result.res.banner
				}
				if(result.res.album.length === 0) {
					this.hasMore = false
					uni.showToast({
						title: '没有更多好图了',
						icon: 'none'
					})
					return;
				}
			this.album = [...this.album, ...result.res.album]
			},
			// 上拉加载
			handleToLower() {
				if(this.hasMore) {
					this.params.skip += this.params.limit
					this.getList()
				} else {
					uni.showToast({
						title: '没有更多数据',
						icon: 'none'
					})
				}
			}
			
		},
	}
</script>

<style scoped lang="less">
	.album_scroll_view {
		height: calc( 100vh - 72rpx );
	}
	swiper {
		height: calc(750rpx / 2.3);
		image {
			height: 100%;
		}
	}
  .album_list {
		padding: 10rpx;
    .album_item {
			display: flex;
			padding: 10rpx 0;
			border-bottom: 1rpx solid #ccc;
      .album_img {
				padding: 10rpx;
				flex: 1;
      image {
				width: 200rpx;
				height: 200rpx;
      }
    }

      .album_info {
				flex: 2;
				padding: 0 10rpx;
				overflow: hidden;
        .album_name {
					font-size: 30rpx;
					color: #000;
					padding: 10rpx 0;
      }

        .album_desc {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					padding: 10rpx 0;
					font-size: 24rpx;
      }

        .album_btn {
					padding: 10rpx;
					display: flex;
					justify-content: flex-end;
          .album_attention {
					color: #d52a7e;
					border: 1rpx solid #d52a7e;
					padding: 10rpx;
        }
      }
    }
  }
}
</style>